<template>
  <div class="div-1">
    <div class="div-2">
    </div>
    <div class="div-3">
    </div>
  </div>
</template>

<script>
import {store} from "@/js/store";

export default {
  name: "LittleDoubleMaxBar",
  props: {
    barData: {
      value: String,
      max: String,
      doubleMax: String,
      state: String
    },
    barHeight: String,
    valueColor: String,
    maxColor: String,
    doubleMaxColor: String
  },
  data() {
    return {
      store
    }
  },
  computed: {
    valueLong() {
      return this.barData.value / this.barData.doubleMax * 100 + "%"
    }, maxLong() {
      return this.barData.max / this.barData.doubleMax * 100 + "%"
    }
  }
}
</script>

<style scoped>
.div-1 {
  height: v-bind(barHeight);
  border-radius: 1px;
  width: 100%;
  background-color: v-bind(doubleMaxColor);
}

.div-2 {
  width: v-bind(valueLong);
  background-color: v-bind(valueColor);

  height: 50%;
}

.div-3 {
  width: v-bind(maxLong);
  background-color: v-bind(maxColor);
  height: 50%;
}
</style>
